import { Metadata } from 'next';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Users,
  MessageSquare,
  BookOpen,
  Github,
  Star,
  GitFork,
  Code,
  Zap,
  Globe,
  ArrowRight,
  ExternalLink,
  Activity,
} from 'lucide-react';

export const metadata: Metadata = {
  title: 'CActor开发者社区 | 技术交流、开源贡献、经验分享平台',
  description:
    'CActor开发者社区：汇聚全球Actor框架开发者，提供技术讨论、经验分享、开源贡献平台。参与GitHub项目、技术博客、线上活动，共建仓颉语言Actor框架生态。',
  keywords: [
    'CActor社区',
    '开发者社区',
    'Actor框架社区',
    '仓颉语言社区',
    '技术交流',
    '开源贡献',
    'GitHub',
    '技术博客',
    '线上活动',
    '经验分享',
    '金融科技',
    '分布式系统',
    '高性能',
    '企业级',
    '开发者',
  ],
  openGraph: {
    title: 'CActor开发者社区 | 技术交流平台',
    description:
      'CActor开发者社区：汇聚全球Actor框架开发者，提供技术讨论、经验分享、开源贡献平台',
    url: 'https://cactor.dev/community',
    siteName: 'CActor',
    images: [
      {
        url: '/community-og-image.png',
        width: 1200,
        height: 630,
        alt: 'CActor开发者社区',
      },
    ],
    locale: 'zh_CN',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'CActor开发者社区 | 技术交流平台',
    description:
      'CActor开发者社区：汇聚全球Actor框架开发者，提供技术讨论、经验分享、开源贡献平台',
    images: ['/community-twitter-image.png'],
  },
  alternates: {
    canonical: '/community',
  },
};

/**
 * GitHub项目统计数据
 */
const githubStats = {
  stars: '12.5K',
  forks: '2.8K',
  contributors: '156',
  releases: '42',
  issues: '23',
  pullRequests: '8',
};

/**
 * 社区活动数据
 */
const communityStats = [
  {
    icon: Users,
    label: '活跃开发者',
    value: '5000+',
    description: '来自全球的活跃开发者',
    color: 'text-blue-600',
  },
  {
    icon: MessageSquare,
    label: '技术讨论',
    value: '1200+',
    description: '每月技术讨论话题',
    color: 'text-green-600',
  },
  {
    icon: BookOpen,
    label: '技术文章',
    value: '300+',
    description: '深度技术文章和教程',
    color: 'text-purple-600',
  },
  {
    icon: Code,
    label: '代码贡献',
    value: '800+',
    description: '社区代码贡献次数',
    color: 'text-orange-600',
  },
];

/**
 * 最新发布版本
 */
const latestReleases = [
  {
    version: 'v2.1.0',
    date: '2024-01-15',
    title: '性能优化与新特性',
    highlights: [
      '消息传递性能提升40%',
      '新增分布式事务支持',
      '改进监控和调试工具',
      '修复已知问题15个',
    ],
    downloads: '15.2K',
  },
  {
    version: 'v2.0.5',
    date: '2024-01-08',
    title: '稳定性更新',
    highlights: [
      '修复内存泄漏问题',
      '优化Actor生命周期管理',
      '改进错误处理机制',
      '更新文档和示例',
    ],
    downloads: '8.7K',
  },
  {
    version: 'v2.0.4',
    date: '2024-01-01',
    title: '新年特别版',
    highlights: [
      '新增集群管理功能',
      '支持动态配置更新',
      '优化网络通信协议',
      '增强安全性验证',
    ],
    downloads: '12.1K',
  },
];

/**
 * 贡献者排行
 */
const topContributors = [
  {
    name: 'Alex Chen',
    avatar: '👨‍💻',
    contributions: 245,
    role: 'Core Maintainer',
    expertise: ['Actor Model', 'Performance'],
  },
  {
    name: 'Sarah Kim',
    avatar: '👩‍💻',
    contributions: 189,
    role: 'Senior Developer',
    expertise: ['Distributed Systems', 'Testing'],
  },
  {
    name: 'Mike Johnson',
    avatar: '👨‍🔬',
    contributions: 156,
    role: 'Documentation Lead',
    expertise: ['Documentation', 'Tutorials'],
  },
  {
    name: 'Lisa Wang',
    avatar: '👩‍🚀',
    contributions: 134,
    role: 'Community Manager',
    expertise: ['Community', 'Support'],
  },
];

/**
 * 热门讨论话题
 */
const hotTopics = [
  {
    title: 'CActor 3.0 路线图讨论',
    category: '产品规划',
    replies: 89,
    views: '2.1K',
    lastActivity: '2小时前',
    author: 'Alex Chen',
    tags: ['roadmap', 'v3.0', 'planning'],
  },
  {
    title: '高并发场景下的Actor设计模式',
    category: '技术讨论',
    replies: 67,
    views: '1.8K',
    lastActivity: '4小时前',
    author: 'Sarah Kim',
    tags: ['concurrency', 'patterns', 'best-practices'],
  },
  {
    title: '金融系统集成经验分享',
    category: '案例分享',
    replies: 45,
    views: '1.2K',
    lastActivity: '6小时前',
    author: 'Mike Johnson',
    tags: ['finance', 'integration', 'case-study'],
  },
  {
    title: 'CActor vs Akka 性能对比测试',
    category: '性能测试',
    replies: 78,
    views: '2.5K',
    lastActivity: '8小时前',
    author: 'Lisa Wang',
    tags: ['performance', 'benchmark', 'comparison'],
  },
];

export default function CommunityPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Hero Section */}
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 text-sm font-medium mb-6">
            <Users className="w-4 h-4 mr-2" />
            开发者社区
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            加入全球
            <span className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
              开发者社区
            </span>
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
            与来自世界各地的开发者一起探索CActor框架的无限可能，分享经验，共同成长，
            推动Actor模型技术的发展和创新。
          </p>

          {/* 社区统计 */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
            {communityStats.map((stat, index) => {
              const Icon = stat.icon;
              return (
                <div key={index} className="text-center">
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-white shadow-lg mb-4">
                    <Icon className={`w-8 h-8 ${stat.color}`} />
                  </div>
                  <div className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
                    {stat.value}
                  </div>
                  <div className="text-sm font-medium text-gray-700 mb-1">
                    {stat.label}
                  </div>
                  <div className="text-xs text-gray-500">
                    {stat.description}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* GitHub集成展示 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              开源项目统计
            </h2>
            <p className="text-lg text-gray-600">
              CActor在GitHub上的开源项目获得了全球开发者的广泛关注和贡献。
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* GitHub统计卡片 */}
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-center">
                  <div className="w-12 h-12 rounded-xl bg-gray-900 flex items-center justify-center mr-4">
                    <Github className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <CardTitle className="text-xl">CActor Framework</CardTitle>
                    <CardDescription>高性能Actor模型框架</CardDescription>
                  </div>
                  <Button variant="outline" size="sm" className="ml-auto">
                    <ExternalLink className="w-4 h-4 mr-2" />
                    访问仓库
                  </Button>
                </div>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-3 gap-4">
                  <div className="text-center p-4 bg-gray-50 rounded-lg">
                    <Star className="w-6 h-6 text-yellow-500 mx-auto mb-2" />
                    <div className="text-2xl font-bold text-gray-900">
                      {githubStats.stars}
                    </div>
                    <div className="text-sm text-gray-600">Stars</div>
                  </div>
                  <div className="text-center p-4 bg-gray-50 rounded-lg">
                    <GitFork className="w-6 h-6 text-blue-500 mx-auto mb-2" />
                    <div className="text-2xl font-bold text-gray-900">
                      {githubStats.forks}
                    </div>
                    <div className="text-sm text-gray-600">Forks</div>
                  </div>
                  <div className="text-center p-4 bg-gray-50 rounded-lg">
                    <Users className="w-6 h-6 text-green-500 mx-auto mb-2" />
                    <div className="text-2xl font-bold text-gray-900">
                      {githubStats.contributors}
                    </div>
                    <div className="text-sm text-gray-600">Contributors</div>
                  </div>
                </div>

                <div className="grid grid-cols-3 gap-4">
                  <div className="text-center">
                    <div className="text-lg font-semibold text-gray-900">
                      {githubStats.releases}
                    </div>
                    <div className="text-sm text-gray-600">Releases</div>
                  </div>
                  <div className="text-center">
                    <div className="text-lg font-semibold text-gray-900">
                      {githubStats.issues}
                    </div>
                    <div className="text-sm text-gray-600">Open Issues</div>
                  </div>
                  <div className="text-center">
                    <div className="text-lg font-semibold text-gray-900">
                      {githubStats.pullRequests}
                    </div>
                    <div className="text-sm text-gray-600">Open PRs</div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 最新版本发布 */}
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-xl">最新版本</CardTitle>
                    <CardDescription>最新功能和改进</CardDescription>
                  </div>
                  <Badge className="bg-green-100 text-green-700">
                    {latestReleases[0].version}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-gray-900">
                    {latestReleases[0].title}
                  </h3>
                  <div className="text-sm text-gray-500">
                    {latestReleases[0].date}
                  </div>
                </div>

                <div className="space-y-2">
                  {latestReleases[0].highlights.map((highlight, index) => (
                    <div key={index} className="flex items-center text-sm">
                      <Zap className="w-3 h-3 text-blue-500 mr-2" />
                      <span className="text-gray-600">{highlight}</span>
                    </div>
                  ))}
                </div>

                <div className="flex items-center justify-between pt-4 border-t">
                  <div className="flex items-center text-sm text-gray-600">
                    <Activity className="w-4 h-4 mr-1" />
                    {latestReleases[0].downloads} 下载
                  </div>
                  <Button size="sm">
                    查看更新日志
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* 贡献者展示 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              核心贡献者
            </h2>
            <p className="text-lg text-gray-600">
              感谢这些优秀的开发者为CActor框架的发展做出的杰出贡献。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {topContributors.map((contributor, index) => (
              <Card
                key={index}
                className="text-center hover:shadow-lg transition-all duration-300 group"
              >
                <CardContent className="pt-6">
                  <div className="text-6xl mb-4 group-hover:scale-110 transition-transform">
                    {contributor.avatar}
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2">
                    {contributor.name}
                  </h3>
                  <Badge variant="secondary" className="mb-3">
                    {contributor.role}
                  </Badge>
                  <div className="text-2xl font-bold text-blue-600 mb-2">
                    {contributor.contributions}
                  </div>
                  <div className="text-sm text-gray-600 mb-4">贡献次数</div>
                  <div className="flex flex-wrap gap-1 justify-center">
                    {contributor.expertise.map((skill, skillIndex) => (
                      <Badge
                        key={skillIndex}
                        variant="outline"
                        className="text-xs"
                      >
                        {skill}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 热门讨论 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="flex items-center justify-between mb-12">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                热门讨论
              </h2>
              <p className="text-lg text-gray-600">
                参与社区讨论，分享经验，获取技术支持。
              </p>
            </div>
            <Button>
              <MessageSquare className="w-4 h-4 mr-2" />
              加入讨论
            </Button>
          </div>

          <div className="space-y-4">
            {hotTopics.map((topic, index) => (
              <Card
                key={index}
                className="hover:shadow-md transition-shadow cursor-pointer"
              >
                <CardContent className="p-6">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <Badge variant="secondary">{topic.category}</Badge>
                        <div className="flex gap-1">
                          {topic.tags.map((tag, tagIndex) => (
                            <Badge
                              key={tagIndex}
                              variant="outline"
                              className="text-xs"
                            >
                              #{tag}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      <h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-blue-600 transition-colors">
                        {topic.title}
                      </h3>
                      <div className="flex items-center text-sm text-gray-600 space-x-4">
                        <span>作者: {topic.author}</span>
                        <span>•</span>
                        <span>{topic.replies} 回复</span>
                        <span>•</span>
                        <span>{topic.views} 浏览</span>
                        <span>•</span>
                        <span>{topic.lastActivity}</span>
                      </div>
                    </div>
                    <div className="flex items-center text-gray-400">
                      <ArrowRight className="w-5 h-5" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 社区资源 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              社区资源
            </h2>
            <p className="text-lg text-gray-600">
              丰富的学习资源和工具，帮助您快速掌握CActor框架。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                title: '技术文档',
                description: '完整的API文档、教程和最佳实践指南',
                icon: BookOpen,
                color: 'from-blue-500 to-cyan-500',
                features: ['API参考', '快速开始', '最佳实践', '故障排除'],
              },
              {
                title: '开发者论坛',
                description: '与全球开发者交流讨论，获取技术支持',
                icon: MessageSquare,
                color: 'from-green-500 to-emerald-500',
                features: ['技术问答', 'Bug报告', '功能请求', '经验分享'],
              },
              {
                title: '技术博客',
                description: '深度技术文章、案例分析和行业洞察',
                icon: Globe,
                color: 'from-purple-500 to-pink-500',
                features: ['技术深度', '案例分析', '行业趋势', '专家观点'],
              },
            ].map((resource, index) => {
              const Icon = resource.icon;
              return (
                <Card
                  key={index}
                  className="hover:shadow-lg transition-all duration-300 group"
                >
                  <CardHeader>
                    <div
                      className={`w-12 h-12 rounded-xl bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <Icon className="w-6 h-6 text-white" />
                    </div>
                    <CardTitle className="text-xl">{resource.title}</CardTitle>
                    <CardDescription>{resource.description}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      {resource.features.map((feature, featureIndex) => (
                        <div
                          key={featureIndex}
                          className="flex items-center text-sm"
                        >
                          <div className="w-1.5 h-1.5 rounded-full bg-gray-400 mr-3" />
                          <span className="text-gray-600">{feature}</span>
                        </div>
                      ))}
                    </div>
                    <Button className="w-full group-hover:bg-blue-600 transition-colors">
                      立即访问
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-gradient-to-r from-blue-600 to-cyan-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            准备加入我们的社区？
          </h2>
          <p className="text-xl mb-8 opacity-90">
            无论您是初学者还是专家，我们的社区都欢迎您的加入。
            一起探索Actor模型的无限可能！
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              variant="secondary"
              className="bg-white text-blue-600 hover:bg-gray-100"
            >
              <Github className="w-5 h-5 mr-2" />
              访问GitHub
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-blue-600"
            >
              <MessageSquare className="w-5 h-5 mr-2" />
              加入论坛
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
